import React from "react";



// 类组件特有state 生命周期
// 人       状态     影响         行为
// 组件     状态     响应（驱动）  视图
class Content extends React.Component {
    constructor() {
        super();
        //声明状态 变量
        this.state = {
            time: new Date().toLocaleString(),
            topics: []
        }

    }
    componentDidMount() {//只执行一次的生命周期
        // this指的就是实例
        // console.log(this)
        fetch("https://cnodejs.org/api/v1/topics")
            .then(res => res.json())//不加{} 回调函数直接return promise  这里是将数据解析为json
            .then(res => {
                console.log(res);
                this.setState({ topics: res.data })
            })

        setInterval(() => {
            this.setState({ time: new Date().toLocaleString() })
        }, 1000)
    }
    render() {
        const { time, topics } = this.state;
        return <div>
            <h1>{this.state.time}</h1>
            <ul>
                {
                    topics.map(topic => {
                        return <li key={topic.id}>
                            <img src={topic.author.avatar_url}/>
                            <span>{topic.replay_count}</span>
                            {topic.title}
                        </li>
                    })
                }
            </ul>
        </div>
    }
}



export default Content;
